<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>使用多个背景图像</title>
        <style type="text/css">
            h3 { text-align:  center }
            .wrapper {
                width: 60% ;
                margin: 30px auto ;
                border: 50px solid rgba( 0 , 0 , 255 , .5 );
                padding: 50px ;
            }

            .wrapper>.content {
                height: 400px ;
                border: 10px solid rgba( 255 , 0 , 0 , .5 );
            }

            .first {
                background-image: url("code.webp") , url("yewen.jpg") ;
                background-repeat: no-repeat , no-repeat;
                background-position: bottom left , top right;
                background-size: 50% , 50% ;
                background-clip: content-box , content-box ;
                background-origin: content-box , content-box ;
            }

            .second {
                background: url("code.webp") no-repeat bottom left  , url("yewen.jpg") no-repeat top right ;
                background-size: 50%  ;
                background-clip: content-box  ;
                background-origin: content-box ;
            }

        </style>
    </head>
    <body>

        <h3>尝试为一个元素设置多个背景图像</h3>

        <div class="wrapper first">
            <div class="content"></div>
        </div>

        <div class="wrapper second">
            <div class="content"></div>
        </div>
        
    </body>
</html>